<template>
  <div class="main-bar">
    <div class="navbar flex" v-if="navType !== 13">
      <div class="flex-item">
        <div class="shop-logo flex v-align-c">
          <!-- <router-link to="/dashboard" class="width-146 height-60 mar-r-7"
            :style="'background:url('+ this.getEnterpriseLogoBanner() + ') no-repeat;background-size: 146px 60px;'"> -->
          <router-link to="/dashboard" class="mar-r-7">
            <img :src="this.getEnterpriseLogoBanner()" class="height-60" />
            <span></span>
          </router-link>
          <div class="font-14">{{ appName }} · 店铺个性化装修</div>
        </div>
      </div>
      <div class="flex-center">
        <div class="shop-select flex v-align-c">
          <div class="select-bar flex v-align-c" @click="changeItem($event)">
            <span class="font-12">{{ customPage.pageType == 10 ? '店铺首页' : '自定义页' }}：</span>
            <div class="flex-item font-12 box-item">
              {{ customPage.pageTitle }}
            </div>
            <i :class="layerShow ? 'up' : ''" class="el-icon-arrow-down mar-r-8 font-12" style="color: #cecece"></i>
          </div>
          <div class="select-link">
            <span class="font-14 pad-l-10 pad-r-10 cursor-p mar-l-10" @click="editPage">编辑</span>
            <span class="font-14 pad-l-10 pad-r-10 cursor-p" @click="creatPage">新建页面</span>
          </div>
          <ul class="change-layer box-item" v-show="layerShow" ref="main">
            <li @click="pageTo(item)" :class="item.show ? 'active' : ''" v-for="(item, index) in pageList" :key="index">
              {{ item.pageTitle }}
            </li>
          </ul>
        </div>
      </div>
      <div class="flex-item">
        <div class="shop-btn flex v-align-c pad-r-25">
          <span
            class="cursor-p pad-l-9 pad-r-9"
            @click="$router.push({ path: '/card/list/index' })"
            >返回</span
          >
          <span class="cursor-p pad-l-9 pad-r-9" @click="preview"
            >保存并预览</span
          >
          <template v-if="customPage.pageType == 10">            
            <el-button
              size="mini"
              class="width-72 mar-l-5 mar-r-5"
              @click="submit(2)"
              >发布</el-button>
            <el-button
              type="primary"
              size="mini"
              class="width-72"
              @click="submit(1)"
              >保存</el-button>
          </template>
          <template v-else>
            <el-button
              type="primary"
              size="mini"
              class="width-72 mar-l-5"
              @click="submit(1)"
              >保存</el-button>            
          </template>
        </div>
      </div>
    </div>
    <div class="navbar flex" v-else>
      <div class="flex-item">
        <div class="shop-logo flex v-align-c">
          <!-- <router-link to="/dashboard" class="width-146 height-60 mar-r-7"
            :style="'background:url('+ this.getEnterpriseLogoBanner() + ') no-repeat;background-size: 146px 60px;'"> -->
          <router-link to="/dashboard" class="mar-r-7">
            <img :src="this.getEnterpriseLogoBanner()" class="height-60" />
            <span></span>
          </router-link>
          <div class="font-14">{{ appName }} · 自定义热门搜索</div>
        </div>
      </div>
      <div class="flex-center">
        
      </div>
      <div class="flex-item">
        <div class="shop-btn flex v-align-c pad-r-25">
          <span
            class="cursor-p pad-l-9 pad-r-9"
            @click="$router.push({ path: '/card/list/index' })"
            >返回</span
          >
          <el-button
            type="primary"
            size="mini"
            class="width-72 mar-l-5"
            @click="saveSearchPageHotWord()"
            >保存</el-button>  
        </div>
      </div>
    </div>
    <!-- 编辑页面弹层 -->
    <el-dialog
      width="500px"
      v-el-drag-dialog
      :title="isAddPage ? '新建页面' : '编辑页面'"
      :visible.sync="editPageVisible"
      :close-on-press-escape="true"
    >
      <el-form
        :model="editPageInfo"
        :rules="rules"
        ref="editPageInfo"
        label-position="right"
        label-width="100px"
        class="pad-l-25 pad-r-25"
      >
        <el-form-item
          label="页面名称"
          prop="pageTitle"
          class="none-mar-b pad-b-10"
        >
          <div class="mar-l-12 mar-r-12">
            <el-input
              style="width: 200px"
              v-model="editPageInfo.pageTitle"
              placeholder="最多10个字"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="页面类型"
          prop="pageType"
          class="none-mar-b pad-b-10"
        >
          <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
            <el-radio
              v-model="editPageInfo.pageType"
              :label="key"
              v-for="(val, key) in dict.pageType"
              :key="key"
              >{{ val }}</el-radio
            >
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editPageVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCustomPageOnly">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog'
import { listCustomPage, saveCustomPageOnly } from '@/api/custom-page/page'
import { getDictByGroupName } from '@/api/common/common'

export default {
  directives: {
    // 拖动窗口
    elDragDialog
  },
  props: {
    pageId: {
      type: String
    },
    // 应用类型
    appType: {
      type: Number,
      default: 10
    },
    // 页面左侧导航类型
    navType: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      layerShow: false,
      dict: {
        pageType: {}
      },
      pageList: [],
      editPageVisible: false,
      isAddPage: false,
      customPage: {
        pageTitle: '',
        pageType: '10'
      },
      editPageInfo: {
        pageTitle: '',
        pageType: '10',
        appType: '10'
      },
      rules: {
        pageTitle: [
          { required: true, message: '请输入页面名称', trigger: 'blur' },
          { max: 10, message: '最多10个字' }
        ]
      },
      appName: ''
    }
  },
  created() {
    if (this.appType === 10) {
      this.appName = '云店小程序'
    } else if (this.appType === 11) {
      this.appName = '批发小程序'
    } else {
      this.appName = '主播小程序'
    }
    getDictByGroupName('CustomPageDTO').then((response) => {
      this.dict = response.data
    })
    const form = {
      enterpriseId: this.getEnterpriseId(),
      appType: this.appType
    }
    if (this.navType === 12) {
      // 只查找首页
      Object.assign(form, { pageType: 10 })
    }
    // 热门搜索页面不需要查询装修数据
    if (this.navType !== 13) {
      listCustomPage(form).then(
        (response) => {
          if (response.isError) return
          this.pageList = response.data
          this.pageList.forEach((item) => {
            item.show = false
            if (item.pageId === this.pageId) {
              item.show = true
              Object.assign(this.customPage, item)
              this.customPage.pageType = this.customPage.pageType.toString()
            }
          })
        }
      )
    }
  },
  mounted() {},
  methods: {
    changeItem(event) {
      // 阻止冒泡
      event || (event = window.event)
      event.stopPropagation
        ? event.stopPropagation()
        : (event.cancelBubble = true)
      this.layerShow = !this.layerShow
      if (this.layerShow) {
        this.showLayer()
      } else {
        this.hideLayer()
      }
    },
    showLayer() {
      this.layerShow = true
      document.addEventListener('click', this.hidePanel, false)
    },
    hideLayer() {
      this.layerShow = false
      document.removeEventListener('click', this.hidePanel, false)
    },
    hidePanel(e) {
      if (this.$refs.main && !this.$refs.main.contains(e.target)) {
        this.hideLayer()
      }
    },
    pageTo(item) {
      this.$confirm('需要保存当前页面吗？', '提示', {
        confirmButtonText: '保存',
        cancelButtonText: '不保存',
        type: 'warning'
      })
        .then(() => {
          this.$emit('submitEls', '1')
          this.layerShow = false
          this.$router.push({
            path:
              '/card/page-detail/index?pageId=' + item.pageId + '&pageType=' + item.pageType + '&appType=' + this.appType
          })
        })
        .catch(() => {
          this.layerShow = false
          this.$router.push({
            path:
              '/card/page-detail/index?pageId=' + item.pageId + '&pageType=' + item.pageType + '&appType=' + this.appType
          })
        })
    },
    preview() {
      this.$emit('submitEls', 3)
    },
    submit(status) {
      this.$emit('submitEls', status)
    },
    editPage() {
      Object.assign(this.editPageInfo, this.customPage)
      this.editPageVisible = true
      this.isAddPage = false
    },
    creatPage() {
      this.$confirm('需要保存当前页面吗？', '提示', {
        confirmButtonText: '保存',
        cancelButtonText: '不保存',
        type: 'warning'
      }).then(() => {
        this.editPageVisible = true
        this.isAddPage = true
        this.editPageInfo = {
          enterpriseId: this.getEnterpriseId(),
          pageTitle: '',
          pageType: '10',
          appType: this.appType
        }
        this.$emit('submitEls', '0')
      })
        .catch(() => {
          this.editPageVisible = true
          this.isAddPage = true
          this.editPageInfo = {
            enterpriseId: this.getEnterpriseId(),
            pageTitle: '',
            pageType: '10',
            appType: this.appType
          }
        })
    },
    saveCustomPageOnly() {
      this.$refs.editPageInfo.validate((valid) => {
        if (!valid) {
          return false
        }
        saveCustomPageOnly(this.editPageInfo).then((response) => {
          if (response.isError) return
          this.editPageVisible = false
          if (this.isAddPage) {
            this.$message({ type: 'success', message: '保存成功！' })
            this.$router.push({
              path:
                '/card/page-detail/index?pageId=' +
                response.data +
                '&pageType=' +
                this.editPageInfo.pageType +
                '&appType=' +
                this.appType
            })
            location.reload()
          } else {
            Object.assign(this.customPage, this.editPageInfo)
            this.$emit('submitEls', '1', this.customPage)
          }
        })
      })
    },
    saveSearchPageHotWord() {
      this.$emit('saveSearchPageHotWord')
    }
  }
}
</script>

<style lang="less" scoped>
@height: 60px;
.main-bar {
  .navbar {
    height: @height;
    background: #2b2b2e;
    &:after {
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }
    .shop-logo {
      float: left;
      color: #fff;
      padding-left: 14px;
      box-sizing: border-box;
    }
    @media screen and (max-width: 1270px) {
      .shop-select {
        margin-left: -20%;
      }
    }
    .shop-select {
      float: left;
      height: @height;
      position: relative;
      z-index: 11;
      .select-link {
        position: absolute;
        right: -139px;
        top: 0px;
        z-index: 15;
        span {
          color: #40a9ff;
          text-decoration: underline;
          line-height: @height;
        }
      }
      .select-bar {
        background: #fff;
        border: #dcdfe6 1px solid;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        padding-left: 22px;
        width: 395px;
        box-sizing: border-box;
        span {
          color: #67c23a;
        }
        div {
          color: #606266;
          cursor: pointer;
        }
        i {
          &.up {
            transform: rotate(180deg);
          }
        }
      }
      .change-layer {
        position: absolute;
        left: 0;
        top: 48px;
        width: 395px;
        background: #fff;
        margin: 0;
        padding: 5px 0;
        z-index: 12;
        height: 200px;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0 !important;
        }
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        li {
          list-style-type: none;
          color: #606266;
          height: 42px;
          line-height: 42px;
          padding-left: 10px;
          cursor: pointer;
          &.active {
            color: #409eff;
            background: #d9ecff;
            &:hover {
              background: #d9ecff;
            }
          }
          &:hover {
            background: #ecf5ff;
          }
        }
      }
    }
    .shop-btn {
      float: right;
      text-align: right;
      color: #fff;
      height: @height;
      span {
        line-height: @height;
      }
    }
  }
  /deep/ .current-type-col {
    color: #67c23a;
  }
}
</style>
